<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统小助手</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="css/all.min.css">
    <!-- FullCalendar 核心样式 -->
    <link href="css/main.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="timeline.css">
    <style>
        /* FullCalendar 基础样式 */
        .fc {
            direction: ltr;
            text-align: left;
        }

        .fc-rtl {
            text-align: right;
        }

        .fc table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        .fc td,
        .fc th {
            padding: 0;
            vertical-align: top;
        }

        .fc-header-toolbar {
            display: none;
        }

        .fc-view-container {
            position: relative;
        }

        .fc-view {
            position: relative;
            z-index: 1;
        }

        .fc-scroller {
            overflow-y: scroll;
            overflow-x: hidden;
        }

        .fc-content-skeleton {
            position: relative;
            z-index: 1;
        }

        .fc-day-grid-container {
            overflow: auto;
            height: 100%;
        }
    </style>

</head>

<body>
    <!-- 左侧菜单 -->
    <div class="sidebar">
        <button class="toggle-sidebar">
            <i class="fas fa-chevron-left"></i>
        </button>
        <div class="menu-item active" data-page="home">
            <i class="fas fa-home"></i>
            <span>总览</span>
        </div>
        <div class="menu-item" data-page="calendar">
            <i class="fas fa-calendar-alt"></i>
            <span>日历待办</span>
        </div>
        <div class="menu-item" data-page="pomodoro">
            <i class="fas fa-clock"></i>
            <span>番茄时间</span>
        </div>
        <div class="menu-item" data-page="countdown">
            <i class="fas fa-hourglass-end"></i>
            <span>未来倒计时</span>
        </div>
        <div class="menu-item" data-page="timeline">
            <i class="fas fa-stream"></i>
            <span>时间轴</span>
        </div>
        <div class="menu-item" data-page="water">
            <i class="fas fa-tint"></i>
            <span>喝水提醒</span>
        </div>
        <div class="menu-item" data-page="clipboard">
            <i class="fas fa-clipboard"></i>
            <span>剪贴板管理</span>
        </div>
        <div class="menu-item" data-page="network-speed">
            <i class="fas fa-wifi"></i>
            <span>网络测速</span>
        </div>
        <div class="menu-item" data-page="text-format">
            <i class="fas fa-code"></i>
            <span>文本格式化</span>
        </div>
        <div class="menu-item" data-page="shutdown">
            <i class="fas fa-power-off"></i>
            <span>关机设置</span>
        </div>
        <div class="menu-item" data-page="other">
            <i class="fas fa-cog"></i>
            <span>系统设置</span>
        </div>

    </div>

    <!-- 右侧内容区域 -->
    <div class="content">
        <!-- 首页 -->
        <div class="page active" id="home">
            <h1>系统概览</h1>
            <div class="last-update">上次更新: <span id="last-update-time">2025-05-02 12:34:57</span> <button
                    id="refresh-btn" class="refresh-btn"><i class="fas fa-sync-alt"></i> 刷新</button></div>

            <div class="home-container">
                <!-- 新增的三个卡片 -->
                <div class="quick-cards">
                    <!-- 快捷操作卡片 -->
                    <div class="quick-card quick-actions-card status-card">
                        <div class="quick-card-header">
                            <h3><i class="fas fa-bolt"></i> 快捷操作</h3>
                        </div>
                        <div class="quick-card-content">
                            <div class="quick-actions">
                                <div id="index-shutdown-btn" class="quick-action-btn shutdown-btn" title="立即关机">
                                    <i class="fas fa-power-off"></i>
                                    <span>立即关机</span>
                                </div>
                                <div id="index-restart-btn" class="quick-action-btn restart-btn" title="重启">
                                    <i class="fas fa-sync-alt"></i>
                                    <span>重启</span>
                                </div>
                                <div id="index-sleep-btn" class="quick-action-btn sleep-btn" title="睡眠">
                                    <i class="fas fa-moon"></i>
                                    <span>睡眠</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 今日待办卡片 -->
                    <div class="quick-card today-tasks-card status-card">
                        <div class="quick-card-header">
                            <h3><i class="fas fa-tasks"></i> 今日待办【<span id="today-tasks-count"
                                    style="color: var(--primary-200);">0</span>】</h3>
                            <a href="#calendar" class="view-all" data-page="calendar">查看全部 <i
                                    class="fas fa-angle-right"></i></a>
                        </div>
                        <div class="quick-card-content">
                            <div class="tasks-list" id="quick-tasks-list">
                                <!-- 待办列表将通过JavaScript动态生成 -->
                            </div>
                            <button class="btn btn-add-task" id="quick-add-task">
                                <i class="fas fa-plus"></i> 添加待办
                            </button>
                        </div>
                    </div>

                    <!-- 最近倒计时卡片 -->
                    <div class="quick-card today-tasks-card status-card">
                        <div class="quick-card-header">
                            <h3><i class="fas fa-hourglass-half"></i> 最近倒计时</h3>
                            <a href="#countdown" class="view-all" data-page="countdown">查看全部 <i
                                    class="fas fa-angle-right"></i></a>
                        </div>
                        <div class="quick-card-content" id="nearest-countdown">
                            <!-- 倒计时内容将由 JavaScript 动态填充 -->
                        </div>
                    </div>


                </div>

                <!-- 系统状态卡片 -->
                <div class="system-status-cards">
                    <div class="status-card cpu-card">
                        <div class="status-card-header">
                            <div class="status-title">CPU</div>
                            <div class="status-icon"><i class="fas fa-microchip"></i></div>
                        </div>
                        <div class="status-value" id="cpu-usage">0%</div>
                        <div class="status-progress">
                            <div class="status-progress-bar" id="cpu-progress-bar" style="width: 0%"></div>
                        </div>
                        <div class="status-details">
                            <div class="status-detail-item">温度: <span id="cpu-temp">0°C</span></div>
                            <div class="status-detail-item">主频: <span id="cpu-freq">0.0GHz</span></div>
                            <div class="status-detail-item">系统: <span id="cpu-platform">无</span></div>
                            <div class="status-detail-item">CPU: <span id="cpu-model">无</span></div>
                        </div>
                        <!-- <a href="#" class="detail-link" id="cpu-detail-link">详细信息 <i class="fas fa-angle-right"></i></a> -->
                    </div>

                    <div class="status-card memory-card">
                        <div class="status-card-header">
                            <div class="status-title">内存</div>
                            <div class="status-icon"><i class="fas fa-memory"></i></div>
                        </div>
                        <div class="status-value" id="memory-usage">0%</div>
                        <div class="status-progress">
                            <div class="status-progress-bar" id="memory-progress-bar" style="width: 0%"></div>
                        </div>
                        <div class="status-details">
                            <div class="status-detail-item">已用: <span id="memory-used">0GB / 0GB</span></div>
                            <div class="status-detail-item">应用占用: <span id="app-memory">0GB</span></div>
                            <div class="status-detail-item">在线时间: <span id="app-uptime">0小时0分钟</span></div>

                        </div>
                        <!-- <a href="#" class="detail-link" id="memory-detail-link">详细信息 <i class="fas fa-angle-right"></i></a> -->
                    </div>

                    <div class="status-card disk-card">
                        <div class="status-card-header">
                            <div class="status-title">存储</div>
                            <div class="status-icon"><i class="fas fa-hdd"></i></div>
                        </div>
                        <div class="status-value" id="disk-usage">0%</div>
                        <div class="status-progress">
                            <div class="status-progress-bar" id="disk-progress-bar" style="width: 0%"></div>
                        </div>
                        <div class="status-details">
                            <div class="status-detail-item">已用: <span id="disk-used">0GB / 0GB</span></div>
                            <div class="status-detail-item">可用空间: <span id="disk-available">0GB</span></div>
                            <div class="status-detail-item">硬盘类型: <span id="disk-type">未知</span></div>
                            <div class="status-detail-item">硬盘信息: <span id="disk-model">未知</span></div>
                        </div>
                        <!-- <a href="#" class="detail-link" id="disk-detail-link">详细信息 <i class="fas fa-angle-right"></i></a> -->
                    </div>
                </div>

                <!-- 常用功能 -->
                <!-- <div class="section-wrapper">
                    <div class="section-header" data-section="common-functions">
                        <h2><i class="fas fa-star"></i> 常用功能</h2>
                        <i class="fas fa-chevron-down"></i>
                    </div>

                    <div class="section-content expanded" id="common-functions-content">
                        <div class="common-functions">
                            <a href="#pomodoro" class="function-card" data-page="pomodoro">
                                <div class="function-icon" style="background-color: #ffcdd2;">
                                    <i class="fas fa-clock"></i>
                                </div>
                                <div class="function-name">番茄时间</div>
                                <div class="function-desc">提高专注力的时间管理工具</div>
                            </a>

                            <a href="#shutdown" class="function-card" data-page="shutdown">
                                <div class="function-icon" style="background-color: #dcedc8;">
                                    <i class="fas fa-power-off"></i>
                                </div>
                                <div class="function-name">关机设置</div>
                                <div class="function-desc">定时关机和倒计时功能</div>
                            </a>

                            <a href="#network-speed" class="function-card" data-page="network-speed">
                                <div class="function-icon" style="background-color: #b3e5fc;">
                                    <i class="fas fa-tachometer-alt"></i>
                                </div>
                                <div class="function-name">网络测速</div>
                                <div class="function-desc">检测网络连接速度</div>
                            </a>

                            <a href="#calendar" class="function-card" data-page="calendar">
                                <div class="function-icon" style="background-color: #e1bee7;">
                                    <i class="fas fa-calendar-alt"></i>
                                </div>
                                <div class="function-name">日历待办</div>
                                <div class="function-desc">快速访问日历和待办任务</div>
                            </a>

                            <a href="#clipboard" class="function-card" data-page="clipboard">
                                <div class="function-icon" style="background-color: #bbdefb;">
                                    <i class="fas fa-clipboard"></i>
                                </div>
                                <div class="function-name">剪切板管理</div>
                                <div class="function-desc">管理系统剪切板历史记录</div>
                            </a>
                        </div>
                    </div>
                </div> -->

                <div class="section-wrapper">
                    <div class="section-header" data-section="launcher">
                        <h2><i class="fas fa-th"></i> 快捷启动器</h2>
                        <i class="fas fa-chevron-down"></i>
                    </div>

                    <!-- 全局快捷启动器 -->
                    <div class="section-content expanded" id="launcher-content">
                        <div id="launcher-panel" class="launcher-panel">
                            <div class="launcher-header">
                                <div class="launcher-actions">
                                    <button id="btn-edit-apps" class="btn btn-secondary">
                                        <i class="fas fa-edit"></i> 编辑应用
                                    </button>
                                    <button id="btn-add-app" class="btn btn-primary">
                                        <i class="fas fa-plus"></i> 添加应用
                                    </button>
                                </div>
                            </div>
                            <div id="launcher-list" class="launcher-list"></div>
                            <div class="launcher-empty-state" id="launcher-empty-state">
                                <i class="fas fa-th-large"></i>
                                <p>尚未添加应用，点击"添加应用"开始</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 剪切板管理 -->
        <div class="page" id="clipboard">
            <div class="clipboard-container">
                <div class="clipboard-top-bar">
                    <h1>
                        剪贴板管理
                    </h1>
                    <div class="auto-monitor">
                        <span>自动监听剪贴板</span>
                        <label class="switch">
                            <input type="checkbox" id="auto-monitor-toggle" checked>
                            <span class="slider round"></span>
                        </label>
                    </div>
                </div>

                <div class="clipboard-main">
                    <div class="clipboard-history-section">
                        <div class="section-header">
                            <h3>剪贴板历史</h3>
                            <div class="header-actions">
                                <button id="refresh-clipboard" class="btn btn-primary">
                                    <i class="fas fa-sync-alt"></i>
                                    刷新
                                </button>
                                <button id="clear-clipboard" class="btn btn-danger">
                                    <i class="fas fa-trash"></i>
                                    清空
                                </button>
                            </div>
                        </div>

                        <div class="clipboard-filter-bar">
                            <div class="search-box">
                                <i class="fas fa-search"></i>
                                <input type="text" id="search-clipboard" placeholder="搜索剪贴板内容...">
                            </div>
                            <div class="type-filters">
                                <button class="type-filter active" data-type="all">
                                    <i class="fas fa-layer-group"></i>
                                </button>
                                <button class="type-filter" data-type="text">
                                    <i class="fas fa-font"></i>
                                </button>
                                <button class="type-filter" data-type="link">
                                    <i class="fas fa-link"></i>
                                </button>
                                <button class="type-filter" data-type="image">
                                    <i class="fas fa-image"></i>
                                </button>
                                <button class="type-filter" data-type="file">
                                    <i class="fas fa-file"></i>
                                </button>
                            </div>
                        </div>

                        <div class="clipboard-list" id="clipboard-list">
                            <!-- 剪贴板项目将通过JavaScript动态添加 -->
                        </div>

                        <div class="clipboard-empty-state" id="clipboard-empty-state">
                            <i class="fas fa-clipboard"></i>
                            <p>暂无剪贴板记录</p>
                            <p class="empty-state-sub">复制内容后将自动记录在这里</p>
                        </div>

                        <div class="clipboard-footer">
                            <span class="item-count">当前共 <span id="item-count">0</span> 个剪贴板项目</span>
                            <div class="footer-actions">
                                <!-- 导出剪贴板历史 -->
                                <!-- <button id="clear-settings" class="btn btn-text">
                                    <i class="fas fa-file-export"></i>
                                    清除策略设置
                                </button> -->
                            </div>
                        </div>
                    </div>

                    <div class="clipboard-preview-section" id="clipboard-preview">
                        <div class="preview-header">
                            <div class="content-info">
                                <i class="fas fa-font"></i>
                                <span>文本</span>
                                <span class="content-size">71字符</span>
                            </div>
                            <div class="content-time">复制于 2023-06-15 14:30:45</div>
                        </div>

                        <div class="preview-content">
                            <div class="preview-actions">
                                <!-- <button class="btn btn-icon" title="置顶">
                                    <i class="fas fa-thumbtack"></i>
                                </button>
                                <button class="btn btn-icon" title="复制">
                                    <i class="fas fa-copy"></i>
                                </button>
                                <button class="btn btn-icon" title="编辑">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="btn btn-icon" title="更多">
                                    <i class="fas fa-ellipsis-h"></i>
                                </button> -->
                            </div>
                            <div class="preview-text"></div>
                        </div>

                        <div class="preview-editor">
                            <div class="editor-toolbar">
                                <button class="btn btn-icon" id="format-content" title="格式化">
                                    <i class="fas fa-code"></i>
                                </button>
                                <button class="btn btn-icon" id="clear-content" title="清除">
                                    <i class="fas fa-eraser"></i>
                                </button>
                            </div>
                            <textarea id="edit-clipboard-content" placeholder="编辑内容..."></textarea>
                            <div class="editor-footer">
                                <label class="checkbox">
                                    <input type="checkbox" id="auto-save">
                                    <span>自动保存</span>
                                </label>
                                <div class="editor-actions">
                                    <button class="btn btn-secondary" id="cancel-edit">取消</button>
                                    <button class="btn btn-primary" id="save-edit">保存修改</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 关机设置 -->
        <div class="page" id="shutdown">
            <h1>关机设置</h1>
            <div class="shutdown-container">
                <!-- 快速关机模块 -->
                <div class="quick-shutdown-container">
                    <h3>快速操作</h3>
                    <div class="quick-shutdown-options">
                        <div class="quick-shutdown-option">
                            <div class="quick-shutdown-icon">
                                <i class="fas fa-power-off"></i>
                            </div>
                            <div class="quick-shutdown-text">立即关机</div>
                        </div>
                        <div class="quick-shutdown-option">
                            <div class="quick-shutdown-icon">
                                <i class="fas fa-sync-alt"></i>
                            </div>
                            <div class="quick-shutdown-text">重启</div>
                        </div>
                        <div class="quick-shutdown-option">
                            <div class="quick-shutdown-icon">
                                <i class="fas fa-moon"></i>
                            </div>
                            <div class="quick-shutdown-text">睡眠</div>
                        </div>

                    </div>
                </div>

                <div class="setting-card">
                    <h3><i class="fas fa-clock"></i> 定时关机</h3>
                    <div class="setting-item time-setting-item">
                        <label>定时关机（24小时制）：</label>
                        <div class="shutdown-time-inputs">
                            <div class="time-input-container">
                                <button class="time-control-btn decrement">
                                    <i class="fas fa-minus"></i>
                                </button>
                                <input type="number" id="shutdown-hour" min="0" max="23" placeholder="时"
                                    class="time-input">
                                <button class="time-control-btn increment">
                                    <i class="fas fa-plus"></i>
                                </button>
                            </div>
                            <span class="time-separator">:</span>
                            <div class="time-input-container">
                                <button class="time-control-btn decrement">
                                    <i class="fas fa-minus"></i>
                                </button>
                                <input type="number" id="shutdown-minute" min="0" max="59" placeholder="分"
                                    class="time-input">
                                <button class="time-control-btn increment">
                                    <i class="fas fa-plus"></i>
                                </button>
                            </div>
                        </div>
                        <button class="btn btn-primary" id="btn-schedule-shutdown">
                            <i class="fas fa-power-off"></i> 设置定时关机
                        </button>
                    </div>
                </div>

                <div class="setting-card">
                    <h3><i class="fas fa-hourglass-half"></i> 倒计时关机</h3>
                    <div class="setting-item time-setting-item">
                        <label>倒计时时长（分钟）：</label>
                        <div class="time-input-container">
                            <button class="time-control-btn decrement">
                                <i class="fas fa-minus"></i>
                            </button>
                            <input type="number" id="shutdown-countdown" min="1" max="1440" placeholder="分钟"
                                class="time-input">
                            <button class="time-control-btn increment">
                                <i class="fas fa-plus"></i>
                            </button>
                        </div>
                        <button class="btn btn-primary" id="btn-countdown-shutdown">
                            <i class="fas fa-stopwatch"></i> 设置倒计时关机
                        </button>
                    </div>
                </div>

                <div class="setting-card">
                    <h3><i class="fas fa-ban"></i> 取消关机</h3>
                    <div class="setting-item">
                        <button class="btn btn-danger" id="btn-cancel-shutdown">
                            <i class="fas fa-times-circle"></i> 清除所有关机设置
                        </button>
                    </div>
                </div>

                <div class="shutdown-status-card">
                    <div class="status-icon">
                        <i class="fas fa-info-circle"></i>
                    </div>
                    <div id="shutdown-result">等待设置...</div>
                </div>
            </div>
        </div>

        <!-- 番茄时间 -->
        <div class="page" id="pomodoro">
            <h1>番茄时间</h1>
            <div class="pomodoro-container">
                <!-- 倒计时模块单独一行 -->
                <div class="pomodoro-display">
                    <div class="pomodoro-timer-container">
                        <div class="timer-circle-container">
                            <div class="timer-circle">
                                <div id="pomodoro-timer">25:00</div>
                                <div id="pomodoro-status">等待开始</div>
                                <svg class="timer-svg" viewBox="0 0 100 100">
                                    <circle class="timer-circle-bg" cx="50" cy="50" r="45"></circle>
                                    <circle class="timer-circle-progress" cx="50" cy="50" r="45" id="timer-progress">
                                    </circle>
                                </svg>
                            </div>
                        </div>
                        <div class="pomodoro-controls">
                            <button class="btn btn-success" id="btn-up-timer-pomodoro">
                                <i class="fas fa-hourglass-start"></i> 正计时
                            </button>
                            <button class="btn btn-primary" id="btn-start-pomodoro">
                                <i class="fas fa-play"></i> 倒计时
                            </button>
                            <button class="btn btn-warning" id="btn-pause-pomodoro">
                                <i class="fas fa-pause"></i> 暂停
                            </button>
                            <button class="btn btn-danger" id="btn-stop-pomodoro">
                                <i class="fas fa-stop"></i> 停止
                            </button>
                            <button class="btn btn-info" id="btn-skip-pomodoro">
                                <i class="fas fa-forward"></i> 跳过
                            </button>
                            <button class="btn btn-primary" id="btn-fullscreen-pomodoro">
                                <i class="fas fa-expand"></i> 全屏
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 时间设置和提醒设置放一行 -->
                <div class="pomodoro-settings">
                    <div class="setting-card">
                        <h3>时间设置</h3>
                        <div class="time-quick-buttons">
                            <button class="btn btn-sm btn-quick-time" data-time="25">25分钟</button>
                            <button class="btn btn-sm btn-quick-time" data-time="15">15分钟</button>
                            <button class="btn btn-sm btn-quick-time" data-time="10">10分钟</button>
                            <button class="btn btn-sm btn-quick-time" data-time="5">5分钟</button>
                            <button class="btn btn-sm btn-quick-time" data-time="1">1分钟</button>
                        </div>
                        <div class="setting-item time-setting-item">
                            <label>专注时长（分钟）：</label>
                            <div class="time-input-container">
                                <button class="time-control-btn decrement">
                                    <i class="fas fa-minus"></i>
                                </button>
                                <input type="number" id="focus-duration" min="1" max="120" value="25"
                                    class="time-input">
                                <button class="time-control-btn increment">
                                    <i class="fas fa-plus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="setting-item time-setting-item">
                            <label>休息时长（分钟）：</label>
                            <div class="time-input-container">
                                <button class="time-control-btn decrement">
                                    <i class="fas fa-minus"></i>
                                </button>
                                <input type="number" id="break-duration" min="1" max="60" value="5" class="time-input">
                                <button class="time-control-btn increment">
                                    <i class="fas fa-plus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="setting-item time-setting-item">
                            <label>长休息时长（分钟）：</label>
                            <div class="time-input-container">
                                <button class="time-control-btn decrement">
                                    <i class="fas fa-minus"></i>
                                </button>
                                <input type="number" id="long-break-duration" min="1" max="60" value="15"
                                    class="time-input">
                                <button class="time-control-btn increment">
                                    <i class="fas fa-plus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="setting-item time-setting-item">
                            <label>每隔番茄数：</label>
                            <div class="time-input-container">
                                <button class="time-control-btn decrement">
                                    <i class="fas fa-minus"></i>
                                </button>
                                <input type="number" id="pomodoros-until-long-break" min="1" max="12" value="4"
                                    class="time-input">
                                <button class="time-control-btn increment">
                                    <i class="fas fa-plus"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="setting-card">
                        <h3>提醒设置</h3>
                        <div class="setting-item checkbox-setting-item">
                            <label>
                                <input type="checkbox" id="notification-enabled" checked>
                                <span>启用桌面通知</span>
                            </label>
                        </div>
                        <div class="setting-item checkbox-setting-item">
                            <label>
                                <input type="checkbox" id="sound-enabled" checked>
                                <span>启用声音提醒</span>
                            </label>
                        </div>
                        <div class="setting-item checkbox-setting-item">
                            <label>
                                <input type="checkbox" id="auto-start-breaks" checked>
                                <span>自动开始休息</span>
                            </label>
                        </div>
                        <div class="setting-item checkbox-setting-item">
                            <label>
                                <input type="checkbox" id="auto-start-pomodoros">
                                <span>自动开始下一个番茄</span>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- 今日统计和历史统计并排放置 -->
                <div class="pomodoro-stats">
                    <div class="stats-card">
                        <h3>今日统计</h3>
                        <div class="stats-item">
                            <i class="fas fa-check-circle"></i>
                            <span>完成番茄数：</span>
                            <span id="today-completed-count">0</span>
                        </div>
                        <div class="stats-item">
                            <i class="fas fa-clock"></i>
                            <span>专注总时长：</span>
                            <span id="today-focus-time">0分钟</span>
                        </div>
                    </div>
                    <div class="stats-card">
                        <h3>历史统计</h3>
                        <div class="stats-item">
                            <i class="fas fa-history"></i>
                            <span>总番茄数：</span>
                            <span id="total-completed-count">0</span>
                        </div>
                        <div class="stats-item">
                            <i class="fas fa-trophy"></i>
                            <span>连续天数：</span>
                            <span id="streak-days">0</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 其他 -->
        <div class="page" id="other">
            <h1>系统设置</h1>
            <div class="settings-container">
                <div class="setting-card">
                    <h3><i class="fas fa-cog"></i> 基本设置</h3>
                    <div class="setting-item checkbox-setting-item">
                        <label class="checkbox-label">
                            <input type="checkbox" id="auto-start">
                            <span class="checkbox-custom"></span>
                            <span class="checkbox-text">开机自启动</span>
                        </label>
                    </div>
                    <div class="setting-item checkbox-setting-item">
                        <label class="checkbox-label">
                            <input type="checkbox" id="auto-connect">
                            <span class="checkbox-custom"></span>
                            <span class="checkbox-text">开机自动连接网络</span>
                            <i class="fas fa-exclamation-circle" style="cursor: pointer;margin-left: 7px;" title="仅北航校园网可用"></i>
                        </label>
                    </div>
                </div>

                <div class="setting-card">
                    <h3><i class="fas fa-wifi"></i> 网络连接(BUAA)</h3>
                    <div class="setting-item text-setting-item">
                        <label for="username">用户名：</label>
                        <div class="input-container">
                            <i class="fas fa-user input-icon"></i>
                            <input type="text" id="username" name="username" placeholder="请输入用户名" autocomplete="off"
                                class="text-input">
                            <span class="input-focus-border"></span>
                        </div>
                    </div>
                    <div class="setting-item text-setting-item">
                        <label for="password">密码：</label>
                        <div class="input-container">
                            <i class="fas fa-lock input-icon"></i>
                            <input type="password" id="password" name="password" placeholder="请输入密码" autocomplete="off"
                                class="text-input">
                            <button type="button" class="password-toggle" id="toggle-password" title="显示/隐藏密码">
                                <i class="fas fa-eye"></i>
                            </button>
                            <span class="input-focus-border"></span>
                        </div>
                    </div>
                    <div class="setting-actions">
                        <button class="btn btn-primary" id="connect-network">
                            <i class="fas fa-wifi"></i> 手动连接网络
                        </button>
                    </div>
                </div>

                <div class="setting-card">
                    <h3><i class="fas fa-save"></i> 操作</h3>
                    <div class="setting-actions">
                        <button class="btn btn-success" id="save-settings">
                            <i class="fas fa-check"></i> 保存设置
                        </button>
                        <button class="btn btn-danger" id="reset-settings">
                            <i class="fas fa-undo"></i> 重置设置
                        </button>
                    </div>
                </div>

                <div class="setting-status-card">
                    <div class="status-icon">
                        <i class="fas fa-info-circle"></i>
                    </div>
                    <div id="settings-status">请设置后保存</div>
                </div>
            </div>
        </div>

        <!-- 网络测速 -->
        <div class="page" id="network-speed">
            <h1>网络测速</h1>
            <div class="network-container">

                <div class="network-results-container">
                    <div class="setting-card">
                        <h3><i class="fas fa-download"></i> 下载速度</h3>
                        <div class="speed-result">
                            <div class="speed-gauge">
                                <div class="gauge-value" id="download-gauge"></div>
                            </div>
                            <div class="speed-value" id="download-speed">--</div>
                            <div class="speed-unit">Mbps</div>
                        </div>
                    </div>

                    <div class="setting-card">
                        <h3><i class="fas fa-upload"></i> 上传速度</h3>
                        <div class="speed-result">
                            <div class="speed-gauge">
                                <div class="gauge-value" id="upload-gauge"></div>
                            </div>
                            <div class="speed-value" id="upload-speed">--</div>
                            <div class="speed-unit">Mbps</div>
                        </div>
                    </div>

                    <div class="setting-card">
                        <h3><i class="fas fa-clock"></i> 网络延迟</h3>
                        <div class="speed-result">
                            <div class="ping-icon">
                                <i class="fas fa-signal"></i>
                            </div>
                            <div class="speed-value" id="ping-value">--</div>
                            <div class="speed-unit">ms</div>
                        </div>
                    </div>
                </div>


                <div class="setting-card">
                    <h3><i class="fas fa-tachometer-alt"></i> 速度测试</h3>
                    <div class="speed-test-container">
                        <div class="ip-address-item">
                            <span class="ip-label">内网IP:</span>
                            <span class="ip-value" id="local-ip">获取中...</span>
                            <button class="btn-copy-ip" data-ip-type="local" title="复制内网IP">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                        <div class="ip-address-item">
                            <span class="ip-label">公网IP:</span>
                            <span class="ip-value" id="public-ip">获取中...</span>
                            <button class="btn-copy-ip" data-ip-type="public" title="复制公网IP">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                        <div class="speed-test-info">
                            <p class="test-note">测试过程需要传输一定数据，建议在Wi-Fi环境下进行</p>
                        </div>
                        <div class="speed-test-actions">
                            <button class="btn btn-primary" id="btn-start-test">
                                <i class="fas fa-play"></i> 开始测速
                            </button>
                        </div>
                    </div>
                </div>



                <div class="setting-card">
                    <h3><i class="fas fa-history"></i> 历史记录</h3>
                    <div class="history-container">
                        <table class="history-table speed-test-history-table" id="history-table">
                            <thead>
                                <tr>
                                    <th>测试时间</th>
                                    <th>下载 (Mbps)</th>
                                    <th>上传 (Mbps)</th>
                                    <th>延迟 (ms)</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- 历史记录将通过JavaScript动态插入 -->
                            </tbody>
                        </table>
                        <div class="history-empty" id="history-empty">
                            <i class="fas fa-info-circle"></i>
                            <p>尚无测速记录</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 日历待办 -->
        <div class="page" id="calendar">
            <h1>日历待办</h1>
            <div class="calendar-container">
                <div class="calendar-controls">
                    <div class="calendar-actions">
                        <button id="prev-month-btn" class="btn btn-secondary">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        <button id="today-btn" class="btn btn-primary">
                            <i class="fas fa-calendar-day"></i> 今日
                        </button>
                        <button id="next-month-btn" class="btn btn-secondary">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                        <span id="current-month" class="current-month"></span>
                    </div>
                    <div class="calendar-view-options">
                        <button id="month-view-btn" class="btn btn-secondary active">
                            <i class="fas fa-calendar-alt"></i> 月
                        </button>
                        <button id="week-view-btn" class="btn btn-secondary">
                            <i class="fas fa-calendar-week"></i> 周
                        </button>
                        <button id="day-view-btn" class="btn btn-secondary">
                            <i class="fas fa-calendar-day"></i> 日
                        </button>
                        <button id="schedule-view-btn" class="btn btn-secondary">
                            <i class="fas fa-list-alt"></i> 日程
                        </button>
                    </div>
                </div>

                <div class="calendar-main">
                    <div id="calendar-view"></div>
                </div>

                <!-- 待办事项和每周统计 -->
                <div class="calendar-stats-container">
                    <!-- 今日待办 -->
                    <div class="task-panel today-tasks">
                        <div class="task-panel-header">
                            <h3><i class="fas fa-calendar-day"></i> 今日待办</h3>
                            <button id="add-task-btn" class="btn btn-primary">
                                <i class="fas fa-plus"></i> 添加事项
                            </button>
                        </div>
                        <div class="task-list" id="task-list">
                            <!-- 待办事项将通过JavaScript动态生成 -->
                            <div class="task-empty-state">
                                <i class="fas fa-clipboard-list"></i>
                                <p>暂无待办事项</p>
                            </div>
                        </div>
                    </div>

                    <!-- 每周统计 -->
                    <div class="task-panel weekly-stats">
                        <div class="task-panel-header">
                            <h3><i class="fas fa-chart-bar"></i> 月度统计</h3>
                        </div>
                        <div class="stats-content">
                            <div class="stats-item">
                                <div class="stats-number" id="completed-tasks">0</div>
                                <div class="stats-label">已完成任务</div>
                            </div>
                            <div class="stats-item">
                                <div class="stats-number" id="pending-tasks">0</div>
                                <div class="stats-label">待完成任务</div>
                            </div>

                            <div class="completion-rate">
                                <div class="rate-label">任务完成率</div>
                                <div class="rate-value" id="completion-rate-value">0%</div>
                                <div class="progress-container">
                                    <div class="progress-bar" id="completion-progress" style="width: 0%"></div>
                                </div>
                            </div>

                            <div class="completion-rate">
                                <div class="rate-label">高优先级任务完成率</div>
                                <div class="rate-value" id="priority-completion-rate">0%</div>
                                <div class="progress-container">
                                    <div class="progress-bar priority-bar" id="priority-progress" style="width: 0%">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 未来倒计时页面 -->
        <div class="page" id="countdown">
            <h1>未来倒计时</h1>
            <div class="countdown-container">
                <button class="btn btn-primary" id="add-countdown-btn">
                    <i class="fas fa-plus"></i> 添加倒计时
                </button>
                <div class="countdown-cards">
                    <!-- 倒计时卡片将通过JavaScript动态生成 -->
                </div>

                <!-- 添加完整倒计时列表模块 -->
                <div class="countdown-list-container">
                    <h3><i class="fas fa-list"></i> 所有倒计时</h3>
                    <div class="countdown-list">
                        <table class="countdown-table">
                            <thead>
                                <tr>
                                    <th>事件名称</th>
                                    <th>分类</th>
                                    <th>目标时间</th>
                                    <th>剩余时间</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- 倒计时列表将通过JavaScript动态生成 -->
                            </tbody>
                        </table>
                        <div class="countdown-list-empty-state">
                            <i class="fas fa-calendar-times"></i>
                            <p>暂无倒计时事项</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 时间轴页面 -->
        <div class="page" id="timeline">
            <div class="timeline-container">
                <div class="timeline-header">
                    <div class="timeline-title">
                        <h1>时间轴</h1>
                        <p class="subtitle">记录你的时间轨迹</p>
                    </div>
                    <div class="timeline-filters">
                        <div class="timeline-tabs">
                            <button class="tab active" data-tab="all">全部</button>
                            <button class="tab" data-tab="task">待办事项</button>
                            <button class="tab" data-tab="pomodoro">番茄时间</button>
                            <button class="tab" data-tab="countdown">倒计时</button>
                        </div>
                        <div class="date-filters">
                            <button class="date-filter" data-filter="today">
                                <i class="fas fa-calendar-day"></i> 今天
                            </button>
                            <button class="date-filter" data-filter="week">
                                <i class="fas fa-calendar-week"></i> 本周
                            </button>
                            <button class="date-filter" data-filter="month">
                                <i class="fas fa-calendar-alt"></i> 本月
                            </button>
                        </div>
                    </div>
                </div>

                <div class="timeline-search">
                    <input type="text" placeholder="搜索时间轴内容..." />
                </div>

                <div class="timeline-stats">
                    <div class="stats-header">今日统计</div>
                    <div class="stats-grid">
                        <div class="stats-card">
                            <div class="stats-title">专注时长</div>
                            <div class="stats-progress">
                                <div class="progress-bar">
                                    <div class="progress" style="width: 0%"></div>
                                </div>
                                <span class="progress-text">0分钟</span>
                            </div>
                        </div>
                        <div class="stats-card">
                            <div class="stats-title">待办完成</div>
                            <div class="stats-progress">
                                <div class="progress-bar">
                                    <div class="progress" style="width: 0%"></div>
                                </div>
                                <span class="progress-text">0/0</span>
                            </div>
                        </div>
                        <div class="stats-card">
                            <div class="stats-title">番茄数</div>
                            <div class="stats-progress">
                                <div class="progress-bar">
                                    <div class="progress" style="width: 0%"></div>
                                </div>
                                <span class="progress-text">0个</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="timeline-content">
                    <!-- 时间轴内容将由 JavaScript 动态生成 -->
                </div>
            </div>
        </div>

        <!-- 喝水提醒页面 -->
        <div class="page" id="water">
            <h1>今天喝水了吗</h1>
            <div class="water-container">
                <!-- 今日饮水进度 -->
                <div class="water-progress-section">
                    <div class="water-progress-container">
                        <div class="water-progress-circle">
                            <div class="water-wave"></div>
                            <div class="water-progress-text">
                                <div id="water-current-div" class="water-current">750</div>
                                <div class="water-target">/ 2000 毫升</div>
                            </div>
                        </div>
                        <div class="water-quick-add">
                            <button class="water-amount-btn" data-amount="200">小杯 200ml</button>
                            <button class="water-amount-btn" data-amount="350">中杯 350ml</button>
                            <button class="water-amount-btn" data-amount="500">大杯 500ml</button>
                            <button class="btn-add-custom">
                                <i class="fas fa-plus"></i>
                                自定义
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 今日饮水记录 -->
                <div class="water-records-section">
                    <div class="section-header">
                        <h3>今日饮水记录</h3>
                        <div class="header-actions">
                            <button class="btn-clear-history">
                                <i class="fas fa-trash"></i>
                                清空记录
                            </button>
                        </div>
                    </div>
                    <div class="water-records-list">
                        <!-- 记录将通过JavaScript动态生成 -->
                    </div>
                </div>

                <!-- 饮水趋势 -->
                <div class="water-trends-section">
                    <div class="section-header">
                        <h3>饮水趋势</h3>
                        <div class="trend-period-selector">
                            <button class="trend-btn active" data-period="week">周</button>
                            <button class="trend-btn" data-period="month" style="display: none;">月</button>
                        </div>
                    </div>
                    <div class="water-trend-chart">
                        <!-- 图表将通过JavaScript动态生成 -->
                    </div>
                </div>

                <!-- 健康状态 -->
                <div class="water-health-section">
                    <div class="health-score-card">
                        <div class="health-score">
                            <span class="score-number" id="health-score">86</span>
                            <span class="score-text">饮水健康评分</span>
                        </div>
                        <div class="health-indicators">
                            <div class="indicator">
                                <span class="indicator-label">今日进度</span>
                                <span id="today-progress" class="indicator-value">38%</span>
                            </div>
                            <div class="indicator">
                                <span class="indicator-label">昨日完成度</span>
                                <span id="yesterday-progress" class="indicator-value">85%</span>
                            </div>
                        </div>
                    </div>
                    <div class="health-advice">
                        <h4>健康建议</h4>
                        <ul class="advice-list">
                            <li><i class="fas fa-info-circle"></i> 根据您的身体情况，建议每日饮水2000ml</li>
                            <li><i class="fas fa-thermometer-half"></i> 温度较高，今日建议增加饮水量200ml</li>
                            <li><i class="fas fa-clock"></i> 上午饮水较少，请及时补充水分</li>
                        </ul>
                    </div>
                </div>

                <!-- 设置面板 -->
                <div class="water-settings-section">
                    <div class="section-header">
                        <h3>个性化设置</h3>
                    </div>
                    <div class="settings-form">
                        <div class="form-group">
                            <label>基本信息</label>
                            <div class="input-group">
                                <div class="input-item">
                                    <label>性别</label>
                                    <select id="gender">
                                        <option value="male">男</option>
                                        <option value="female">女</option>
                                    </select>
                                </div>
                                <div class="input-item">
                                    <label>年龄</label>
                                    <input type="number" id="age" min="1" max="120">
                                </div>
                                <div class="input-item">
                                    <label>体重(kg)</label>
                                    <input type="number" id="weight" min="20" max="200">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>活动量</label>
                            <select id="activity-level">
                                <option value="sedentary">久坐办公</option>
                                <option value="moderate">中等运动</option>
                                <option value="active">高强度运动</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>提醒设置</label>
                            <div class="reminder-settings">
                                <div class="reminder-toggle">
                                    <label class="switch">
                                        <input type="checkbox" id="reminder-enabled">
                                        <span class="slider round"></span>
                                    </label>
                                    <span>开启提醒</span>
                                </div>
                                <div class="reminder-interval">
                                    <label>提醒间隔</label>
                                    <select id="reminder-interval">
                                        <option value="30">每30分钟</option>
                                        <option value="60">每1小时</option>
                                        <option value="120">每2小时</option>
                                    </select>
                                </div>
                                <div class="reminder-methods">
                                    <label>提醒方式</label>
                                    <div class="checkbox-group">
                                        <label class="checkbox-label">
                                            <input type="checkbox" id="notification-enabled">
                                            <span class="checkbox-custom"></span>
                                            <span>桌面通知</span>
                                        </label>
                                        <label class="checkbox-label">
                                            <input type="checkbox" id="sound-enabled">
                                            <span class="checkbox-custom"></span>
                                            <span>声音提醒</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-actions">
                            <button class="btn btn-primary" id="save-water-settings">
                                <i class="fas fa-save"></i> 保存设置
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 文本格式化 -->
        <div class="page" id="text-format">
            <h1>文本格式化</h1>
            <div class="container">
                <h1>SQL IN语句生成器</h1>
                
                <div class="instructions">
                    <p><strong>使用说明：</strong></p>
                    <p>1. 在左侧输入框中输入文本，每行一个值</p>
                    <p>2. 点击"格式化"按钮将文本转换为SQL IN语句格式</p>
                    <p>3. 使用"复制结果"按钮复制格式化后的文本</p>
                    <p>4. 生成的格式示例：IN ('value1', 'value2', 'value3')</p>
                </div>
                
                <div class="input-section">
                    <label for="inputText">输入文本（每行一个值）：</label>
                    <textarea id="inputText" placeholder="请输入文本，每行一个值..."></textarea>
                </div>
                
                <div class="buttons">
                    <button id="formatBtn">格式化</button>
                    <button id="copyBtn" class="copy-btn">复制结果</button>
                    <button id="clearBtn" class="clear-btn">清空</button>
                </div>
                
                <div class="output-section">
                    <label for="outputText">格式化结果：</label>
                    <textarea id="outputText" readonly placeholder="格式化后的结果将显示在这里..."></textarea>
                </div>
            </div>
        </div>
    </div>

    <div id="custom-prompt" class="modal">
        <div class="modal-content">
            <h3>应用名称</h3>
            <input type="text" id="app-name-input" placeholder="请输入应用名称">
            <div class="modal-buttons">
                <button id="confirm-app-name" class="btn">确定</button>
                <button id="cancel-app-name" class="btn btn-secondary">取消</button>
            </div>
        </div>
    </div>

    <!-- 提示框容器 -->
    <div class="toast-container" id="toast-container"></div>

    <!-- 任务编辑对话框 -->
    <div id="task-edit-modal" class="modal">
        <div class="modal-content task-edit-content">
            <h3 id="task-modal-title">添加待办事项</h3>
            <form id="task-form">
                <div class="form-group">
                    <label for="task-title">标题</label>
                    <input type="text" id="task-title" placeholder="请输入标题" required>
                </div>
                <div class="form-group">
                    <label for="task-description">描述</label>
                    <textarea id="task-description" placeholder="请输入描述（选填）"></textarea>
                </div>
                <div class="form-group">
                    <label for="task-date">日期</label>
                    <input type="date" id="task-date" required>
                </div>
                <div class="form-group time-inputs">
                    <div>
                        <label for="task-start-time">开始时间</label>
                        <input type="time" id="task-start-time">
                    </div>
                    <div>
                        <label for="task-end-time">结束时间</label>
                        <input type="time" id="task-end-time">
                    </div>
                </div>
                <div class="form-group">
                    <label for="task-color">颜色标记</label>
                    <select id="task-color">
                        <option value="#68a67d">绿色</option>
                        <option value="#3788d8">蓝色</option>
                        <option value="#F18F01">橙色</option>
                        <option value="#e74c3c">红色</option>
                        <option value="#9c59b6">紫色</option>
                        <option value="#3498db">天蓝</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="checkbox-label">
                        <input type="checkbox" id="task-completed">
                        <span class="checkbox-custom"></span>
                        <span class="checkbox-text">标记为已完成</span>
                    </label>
                </div>
                <div class="form-group">
                    <label class="checkbox-label">
                        <input type="checkbox" id="task-notification" checked>
                        <span class="checkbox-custom"></span>
                        <span class="checkbox-text">启用桌面通知</span>
                    </label>
                </div>
                <div class="modal-buttons">
                    <button type="button" id="task-delete-btn" class="btn btn-danger">
                        <i class="fas fa-trash"></i> 删除
                    </button>
                    <div class="modal-action-buttons">
                        <button type="button" id="task-cancel-btn" class="btn btn-secondary">取消</button>
                        <button type="submit" id="task-save-btn" class="btn btn-primary">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 添加倒计时编辑对话框 -->
    <div id="countdown-edit-modal" class="modal">
        <div class="modal-content countdown-edit-content">
            <h3 id="countdown-modal-title">添加倒计时</h3>
            <form id="countdown-form">
                <div class="form-group">
                    <label for="countdown-title">事件名称</label>
                    <input type="text" id="countdown-title" placeholder="请输入事件名称" required>
                </div>
                <div class="form-group">
                    <label for="countdown-date">目标日期</label>
                    <input type="date" id="countdown-date" required>
                </div>
                <div class="form-group">
                    <label for="countdown-time">目标时间</label>
                    <input type="time" id="countdown-time" required>
                </div>
                <div class="form-group">
                    <label for="countdown-category">分类</label>
                    <select id="countdown-category">
                        <option value="节日">节日</option>
                        <option value="学习">学习</option>
                        <option value="生活">生活</option>
                        <option value="其他">其他</option>
                    </select>
                </div>
                <div class="modal-buttons">
                    <button type="button" id="countdown-delete-btn" class="btn btn-danger">
                        <i class="fas fa-trash"></i> 删除
                    </button>
                    <div class="modal-action-buttons">
                        <button type="button" id="countdown-cancel-btn" class="btn btn-secondary">取消</button>
                        <button type="submit" id="countdown-save-btn" class="btn btn-primary">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 添加自定义饮水记录对话框 -->
    <div id="add-water-modal" class="modal">
        <div class="modal-content water-record-content">
            <div class="modal-header">
                <h3>添加饮水记录</h3>
                <button class="btn-close" id="close-water-modal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <form id="water-record-form">
                <div class="form-group">
                    <label>饮水量 (ml)</label>
                    <input type="number" id="water-amount" min="0" max="2000" step="50" required>
                </div>
                <div class="form-group">
                    <label>饮品类型</label>
                    <select id="water-type" required>
                        <option value="water">矿泉水</option>
                        <option value="tea">茶</option>
                        <option value="coffee">咖啡</option>
                        <option value="juice">果汁</option>
                        <option value="milk">牛奶</option>
                        <option value="other">其他</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>时间</label>
                    <input type="time" id="water-time" required>
                </div>
                <div class="modal-buttons">
                    <button type="button" class="btn btn-secondary" id="cancel-water-record">取消</button>
                    <button type="submit" class="btn btn-primary" id="save-water-record">添加</button>
                </div>
            </form>
        </div>
    </div>
    <!-- 清理策略设置对话框 -->
    <div class="modal" id="settings-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-cog"></i> 清理策略设置</h3>
                <button class="btn-close">&times;</button>
            </div>
            <div class="modal-body">
                <div class="setting-item">
                    <label>自动清理时间</label>
                    <select id="auto-clean-time">
                        <option value="0">永不</option>
                        <option value="7">7天</option>
                        <option value="30">30天</option>
                        <option value="90">90天</option>
                    </select>
                </div>
                <div class="setting-item">
                    <label>最大记录数</label>
                    <input type="number" id="max-items" min="10" max="1000" value="100">
                </div>
                <div class="setting-item">
                    <label class="checkbox">
                        <input type="checkbox" id="keep-starred">
                        <span>保留已收藏的项目</span>
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" id="cancel-settings">取消</button>
                <button class="btn btn-primary" id="save-settings">保存设置</button>
            </div>
        </div>
    </div>

    <!-- FullCalendar JS 库 -->
    <script src="js/main.min.js"></script>
    <!-- 使用重构后的渲染进程入口文件 -->
    <script src="renderer.js"></script>
</body>

</html>